import 'package:flutter/material.dart';
import 'package:flutter_shopping/models/product.dart';
import 'package:flutter_shopping/utils/colors.dart';
import 'package:flutter_shopping/utils/constants.dart';
import 'package:flutter_shopping/utils/utils.dart';

class ProductItem extends StatelessWidget {
  final Product product;
  final ValueChanged<Product>? onTap;

  const ProductItem({
    super.key,
    required this.product,
    this.onTap,
  });

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () => onTap?.call(product),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Expanded(
            child: Container(
              padding: const EdgeInsets.all(kDefaultPadding),
              decoration: BoxDecoration(
                color: product.color!,
                borderRadius: BorderRadius.circular(16),
              ),
              child: Hero(
                tag: product.id!,
                child: Utils.loadImage(product.imageName!),
              ),
            ),
          ),
          Text(
            product.title!,
            style: const TextStyle(color: kTextColor),
          ),
          Text(
            "\$${product.price!}",
            style: const TextStyle(
              color: Colors.black,
              fontWeight: FontWeight.bold,
            ),
          ),
        ],
      ),
    );
  }
}
